/*
 * Copyright (C) 2014 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
@styleguide Colors
<br/>

<div class="grid-row Colorguide-container--primary-theme">
    <div class="Colorguide-color Colorguide-color--primary">
      <span class="Colorguide-var">
        Brand Primary
        <br/>
        $ic-brand-primary
      </span>
    </div>
    <div class="Colorguide-color Colorguide-color--success">
      <span class="Colorguide-var ">
        Shamrock
        <br/>
        $ic-color-success
      </span>
    </div>
    <div class="Colorguide-color Colorguide-color--action">
      <span class="Colorguide-var">
        Barney
        <br/>
        $ic-color-action
      </span>
    </div>
    <div class="Colorguide-color Colorguide-color--danger">
      <span class="Colorguide-var">
        Crimson
        <br/>
        $ic-color-danger
      </span>
    </div>
    <div class="Colorguide-color Colorguide-color--alert">
      <span class="Colorguide-var">
        Fire
        <br/>
        $ic-color-alert
      </span>
    </div>
</div>
<div class="grid-row Colorguide-container--primary-theme">
  <div class="Colorguide-color Colorguide-color--dark">
    <span class="Colorguide-var">
      Licorice
      <br/>
      $ic-color-dark
    </span>
  </div>
  <div class="Colorguide-color Colorguide-color--medium-darker">
    <span class="Colorguide-var">
      Oxford
      <br/>
      $ic-color-medium-darker
    </span>
  </div>
  <div class="Colorguide-color Colorguide-color--medium">
    <span class="Colorguide-var">
      Slate
      <br/>
      $ic-color-medium
    </span>
  </div>
  <div class="Colorguide-color Colorguide-color--medium-lighter">
    <span class="Colorguide-var">
      Ash
      <br/>
      $ic-color-medium-lighter
    </span>
  </div>
</div>
<div class="grid-row Colorguide-container--primary-theme">
  <div class="Colorguide-color Colorguide-color--border-dark">
    <span class="Colorguide-var">
      Heather
      <br/>
      $ic-border-dark
    </span>
  </div>
  <div class="Colorguide-color Colorguide-color--border-light">
    <span class="Colorguide-var">
      Tiara
      <br/>
      $ic-border-light
    </span>
  </div>
  <div class="Colorguide-color Colorguide-color--medium-light">
    <span class="Colorguide-var">
      Porcelain
      <br/>
      $ic-color-medium-light
    </span>
  </div>
  <div class="Colorguide-color Colorguide-color--light">
    <span class="Colorguide-var">
      White
      <br/>
      $ic-color-light
    </span>
  </div>

</div>

## Using color variables

It's best to use what we call a *functional variable* to pull in our main canvas color variables.


If our code looks like this:


    <p class="i-need-a-specific-color">Hello, Pando!</p>


Then we would write our scss it like:


    $myCustomColor: $ic-brand-primary;
    p.customColor {
      color: $myCustomColor;
    }

## Background Colors

When adding background colors, use the variable we have provided. This will ensure we continue to meet our a11y contrast ratios.
<br/>
<br/>
<div class="sg-bg-color-example">This is using: background: $ic-bg-light-primary and color: $ic-bg-light-primary-text</div>
<br/>
<div class="sg-bg-color-example sg-bg-color-example--neutral">This is using: background: $ic-bg-light-neutral and color: $ic-bg-light-neutral-text</div>
<br/>
<div class="sg-bg-color-example sg-bg-color-example--success">This is using: background: $ic-bg-light-success and color: $ic-bg-light-success-text</div>
<br/>
<div class="sg-bg-color-example sg-bg-color-example--alert">This is using: background: $ic-bg-light-alert and color: $ic-bg-color-light-alert-text</div>
<br/>
<div class="sg-bg-color-example sg-bg-color-example--danger">This is using: background: $ic-bg-light-danger and color: $ic-bg-light-danger-text</div>



  - Use color variables when adding colors to your elements.
  - Use function variable names when pulling in color variables.
  - High Contrast colors are automatically pulled in based on the canvas color variables.

*/
